<template>
  <div class="video-player-box">
    <video
      class="video-player"
      ref="video"
      autoplay
      disablePictureInPicture
      poster="@/assets/images/loader-thumb.jpg"
    ></video>
    <div class="q-p" @click="toggleFullScreen"></div>
  </div>
</template>

<script setup>
  import { NstdMessage } from 'nstd-components-pc-v3';
  import { busVideo, realTimeStream } from '@/api/auth/ledger.js';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const emit = defineEmits();
  const props = defineProps(['videoBoj']);
  const wfs = ref(null);
  const video = ref(null);
  const heartBeatTime = ref(null);
  const videoBoj = ref({});
  const paramsVideo = ref({
    pageNum: 0,
    pageSize: 1
  });
  const times = ref(0);
  nextTick(() => {});
  onMounted(() => {
    // handleNodeClick();
  });
  function initJMuxer() {
    wfs.value = new Wfs();
    window.wfs = wfs.value;
  }
  function toggleFullScreen() {
    if (video.value) {
      if (!document.fullscreenElement) {
        video.value.requestFullscreen().catch((e) => {
          console.error(`全屏失败: ${e.message}`);
        });
      } else {
        // 退出全屏
        document.exitFullscreen();
      }
    }
  }
  function handleNodeClick(e) {
    console.log(e, 'eeeee');
    // paramsVideo.value.deviceCode = authNav.deviceCode;
    // busVideo(paramsVideo).then((res) => {

    // });
    console.log(props.videoBoj, 'props.videoBoj');

    videoBoj.value = e;
    const params = {
      channelNos: videoBoj.value.nvrChannel || '',
      code: '',
      id: videoBoj.value.nvrCode || '',
      psUrl: ''
    };
    realTimeStream(params).then((e) => {
      closeWebsocket();
      initJMuxer();
      inintSocket();
      // startListenMessage();
    });
  }
  // 初始化长链接
  function inintSocket(reconnect) {
    console.log(reconnect, 'reconnect');
    // const { c, t, v } = this.openMsgConf;
    const openMsgConf = {
      c: videoBoj.value.nvrCode,
      t: 'realVideoOpen',
      v: String(videoBoj.value.nvrChannel)
    };
    // const duration = new Date(endTime).valueOf() - new Date(startTime).valueOf()
    const { protocol, host } = location;
    let wsProtocol = protocol === 'http:' ? 'ws://' : 'wss://';
    const socketURL = `${wsProtocol}${host}/voiceStreamWs/`;
    wfs.value.attachMedia(
      video.value,
      openMsgConf.c,
      'H264Raw',
      socketURL,
      openMsgConf.t,
      openMsgConf.v,
      null,
      (socket) => {
        NstdMessage.success('视频回放完成');
        clearInterval(heartBeatTime.value);
        // console.log(this.wfs);
        video.value.src = '';
        // this.$emit('complete');
      }
    );
    heartBeat();
  }
  function closeWebsocket() {
    const closeMsgConf = {
      c: videoBoj.value.nvrCode,
      t: 'realVideoClose',
      v: String(videoBoj.value.nvrChannel)
    };
    if (wfs.value) {
      wfs.value.closeWebSocket(closeMsgConf);
      wfs.value.websocketLoader.onWebsocketDataUploading({
        data: closeMsgConf
      });
      wfs.value.websocketLoader.destroy();
    }
  }
  const activeChang = (index) => {
    if (index === 2) {
      getDistanceType(1).then((e) => {
        console.log('监听ue', e);
        if (e.function == 'getHistory') {
          emit('getHistory');
        }
        // startListenMessage();
      });
      // startListenMessage();
    } else {
      getDistanceType(0);
    }
    emit('activeChange', index);
  };
  function heartBeat() {
    const heartBeatConf = {
      c: videoBoj.value.nvrCode,
      t: 'heartBeat',
      v: String(videoBoj.value.nvrChannel)
    };
    // if (!this.wfs.websocketLoader.client) {
    //   return false;
    // }
    heartBeatTime.value = setInterval(() => {
      wfs.value.websocketLoader.onWebsocketDataUploading({
        data: JSON.stringify(heartBeatConf)
      });
    }, 5000);
  }
  const preserVation = (name) => {
    console.log('传给ue', name);
    getSaveDistance(name).then((e) => {
      console.log('ue返回值', e);
      if (e.sessionId) {
        isVisible.value = false;
      }
    });
    console.log('name', name);
  };
  defineExpose({
    handleNodeClick
  });
</script>

<style lang="scss" scoped>
  .video-player-box {
    width: 100%;
    height: 100%;
    position: relative;
    .video-player {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .q-p {
      width: 27px;
      height: 27px;
      position: absolute;
      top: 25px;
      right: 10px;
      background: url('@/assets/images/home-page/fd.png');
      background-size: 100% 100%;
      z-index: 999999;
    }
  }
</style>
